{template "header.html"}
<!--首页导航-->
{template "index-daohang.html"}
<!--左边圈子-->

<!--右边帖子-->

<!--首页列表-->

<div class="d-container d-yincang-pc d-huading-0" 
{if $beijingtu}

{else}
style="background: {if $beijingyanse}{$beijingyanse}{else}linear-gradient(to right, #11d2b5, #745b91){/if}"
{/if}
>
	<div class="d-row">
		
    	<div class="col-md-7">
			<div class="d-yuanjiao-bianhua-10-10 d-kuan  d-bianhua-20 " 
			{if $beijingtu}

            {else}
            style="background: {if $beijingyanse}{$beijingyanse}{else}linear-gradient(to right, #11d2b5, #745b91){/if}"
            {/if}
			>
				
				<div class="row">
					
					<div class="col-md-12 col-xs-12 d-div-zou  d-buhuanhang d-yincang-pc d-huading-100"> 
					    <a href="javascript:goBack();">
					        <img class="d-yuanjiao-20 pull-left" src="{HOME_THEME_PATH}quan/img/fanhui.svg" height="20"/>
						</a>
						<a href="{CLIENT_URL}index.php?ye=0">
						    <img class="pull-right" src="{HOME_THEME_PATH}quan/img/shouye3.png" height="20"/> 
						</a>
						{if $uid == $member.uid}
							<a class="d-yincang-pc d-you-10 d-quxian-0 pull-right" href="{dr_member_url($uriprefix.'quan/home/edit', ['id' => $id])}"> 
								<div class="d-yuanjiao-20 pull-right d-zitiyanse-bai d-zuoyou-10 d-wenzi-14"> 
								<i class="fa fa-cog"></i>
								</div>
							</a>
						{/if}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{php $erjibiao = '1_'.MOD_DIR.'_fenlei';}
{php $youerji = \Phpcmf\Service::M()->db->table($erjibiao)->where('yijiid', $_GET['qid'])->get()->getRowArray();}
<div>
	<div id="show">
<div class="d-kuangjia d-kuangjia-0">
	<div class="row" >
		<div class="col-md-2 d-yincang d-piaofu-95-0 d-guding-95  " >
			<span style="width: 10px; color: #ffffff;">.</span>
			<div class="d-piaofu-0-2-0 d-guding-95-ding">
				
				
			    
			</div>
			
		</div>
	    <div class="col-md-7">
	        <div class="d-kuan-fu-10">
	            
	        
			
			
			<div class="d-yuanjiao-bianhua-10-10 d-kuan d-beijing-baise d-bianhua-20 d-dingbu-bianhua" 
			{if $beijingtu}
			style="background: url({dr_get_file($beijingtu)}) center center / cover no-repeat rgb(255, 255, 255);"
			{else}
			style="background: {if $beijingyanse}{$beijingyanse}{else} linear-gradient(to right, #11d2b5, #745b91) {/if}"
			
			{/if}
			>
			    {if $beijingtu}
    			<div class="d-gao-80 d-yincang-pc"></div>
    			{else}
    			<div class="d-gao-80 d-yincang-pc"></div>
    			{/if}
				<!--圈子头部-->
				<div class="row">
					<!--返回-->
					
					<div class="d-kuan d-buhuanhang d-a-bai">
						<div class="d-kuan ">
						    
							<div class="col-md-12 col-xs-12 d-waigao-20 d-xia-20 d-div-zou  d-buhuanhang">
								<div class=" d-yuanjiao-10">
									{if $thumb}
									<img class="d-yuanjiao-20" src="{dr_get_file($thumb)}" height="60" width="60"/>
									{else}
									<img class="d-yuanjiao-20" src="{HOME_THEME_PATH}quan/img/xinping.png" height="60" width="60"/>
									{/if}
								</div>
								<div class="d-zuo-10">
									<div class="d-jiacu d-wenzi-16 d-zitiyanse-bai-100">私密圈子 - {$title}</div>
									<div class="d-wenzi-14 d-zitiyanse-bai d-wenzi-touming-60 d-buhuanhang">
										<span >
											帖子 
										    {count action=table table=1_quan_form_son cid=$id return=tiezi}
										    {$tiezi_count}
										</span> 
										<span class="d-buhuanhang d-zuo-10"> 会员 <div class="d-zuo-10" {if $member} id="module_joins_{$id}"{/if}>{intval($joins)}</div></span>
									</div>
									<div class="d-wenzi-14 d-zitiyanse-bai d-buhuanhang">
										<a href="{dr_url($uriprefix.'quan/home/guanlilist', ['quanid' => $id])}">
										
										<span class="d-zuo-100">
										{php $userweixin=\Phpcmf\Service::M()->db->table('member_oauth')->where('uid', $uid)->get()->getRowArray();}
										圈主：{php $user=dr_member_info($uid);}
											{if $userweixin.nickname}
												{$userweixin.nickname}
											{elseif $user.name}
												{$user.name}
											{else}
												{$user.username}
											{/if}
										</span>
										</a>

									</div>
									<div class="d-wenzi-14 d-zitiyanse-bai d-buhuanhang"> 邀请才能加入</div>
								</div>
							</div>
						</div>
						
						{if $uid == $member.uid}
						<div class="d-kuan-50  d-xia-20 d-you-10 d-quxian-0">
							<a href="{dr_member_url($uriprefix.'quan/home/edit', ['id' => $id])}"> 
								<div class="d-shang-30 d-neikuang-5-10 d-beijing-baise d-yuanjiao-20 pull-right d-zitiyanse-hei"> 
								<i class="fa fa-cog"></i>
								</div>
							</a>
						</div>
						{/if}
						{php $daoqi = \Phpcmf\Service::M()->db->table('1_'.MOD_DIR.'_buy')->where('cid', $id)->where('uid', $member.uid)->get()->getRowArray();}
						
						    
							<div class="d-kuan-100  d-xia-20 d-you-10 d-quxian-0">
								<a class="simi_jiaru" id="simi_jiaru_{$id}" data-id="{$id}" data-toggle="modal" data-target="#mytupian" >
									<div class="d-shang-30 d-neikuang-5-10 d-beijing-baise d-yuanjiao-20 pull-right d-zitiyanse-hei" > + 加 入</div>
								</a>
							</div>
						
					</div>
					<div class="d-kuan d-buhuanhang d-a-bai d-zitiyanse-bai-100 d-xia-10">
						<div class="col-md-12 col-xs-12 d-wenzi-touming-90 d-buhuanhang d-quxian-0">
							
						</div>
					</div>
					<div class="d-kuan d-buhuanhang d-a-bai d-zitiyanse-bai-100">
						<div class="col-md-12 col-xs-12 d-wenzi-touming-90 d-xia-10">
							
						</div>
					</div>
					<div class="d-kuan d-buhuanhang d-a-bai d-zitiyanse-bai-100 d-shang-10">
						
						<div class="col-md-4 col-xs-4 ">
							<a onclick="javascript:d_fenxiang();">
								<div class="d-beijing-baise-10 d-hanggao-30 d-yuanjiao-10 d-wenzi-juzhong d-kuai">分享</div>
							</a>
							
					    </div>
						<div class="col-md-4 col-xs-4 ">
							<div class="d-beijing-baise-10 d-hanggao-30 d-yuanjiao-10 d-wenzi-juzhong">
								帖子: **
								<!--div class="col-xs-6 d-wenzi-youbian">
									<a class="tag_quanzan " id="tag_quanzan_{$id}" data-id="{$id}">
										{dr_quan_tag_quanzan($id,$quanzan)} 
									</a>
								</div>
								<div class="col-xs-6 d-wenzi-zuobian">
									<span {if $member} id="module_quanzan_{$id}"{/if}>{intval($quanzan)}</span>
								</div-->
								<div class="d-clear"></div>
							</div>
							
						</div>
						<div class="col-md-4 col-xs-4 ">
							<div class="d-beijing-baise-10 d-hanggao-30 d-yuanjiao-10 d-wenzi-juzhong">浏览：**</div>
						</div>
					</div>
				</div>

			</div>
			
			
			
			
			
			</div>
		</div>
		<div class="col-md-3 d-yincang">
			
			
			
			
		</div>
	</div>
</div>


<!--分享图-->
{template "show-index-fenxiangtu.html"}
<!--尾部导航-->

{template "fanhui.html"}
<div class="d-fenxiang d-xiala-fenxiang" style="display: none;">
	<div class="d-container">
		<div class="d-row">
			<div class="d-col-md-8-juzhong d-quxian-0 d-a-baise">
				<!--分享图123-->
				<div class="">
						<nav aria-label="">
						<!--PC端-->
						  <ul class="pager d-yincang">
							<li>
								<a  class="d-wenzi-14 my_poster_button d-zitiyanse-hui" data-id="{$id}" data-mid="{MOD_DIR}">
									<img src="{HOME_THEME_PATH}web/img/haibao.png" width="40" height="40" class="">
									<div>海报</div>
								</a>
							</li>
							
						  </ul>
						  <!--移动端-->
						  <ul class="pager d-yincang-pc">
							<li>
								<a  class="d-wenzi-14 my_poster_button d-zitiyanse-hui" data-id="{$id}" data-mid="{MOD_DIR}">
									<img src="{HOME_THEME_PATH}web/img/haibao.png" width="40" height="40" class="">
									<div>海报</div>
								</a>
							</li>
							
							<li>
								<a onclick="javascript:d_weixin();" class="d-zuo-10 d-wenzi-14  d-zitiyanse-hui" >
									<img src="{HOME_THEME_PATH}web/img/weixin.png" width="40" height="40" class="">
									<div>微信</div>
								</a>
							</li>
						  </ul>
						</nav>
				</div>
				<!--分享图-->
				<div class="col-xs-12 d-wenzi-juzhong d-quxian-0 d-shang-10">
				<div class="d-kuan d-neikuang-10" onclick="javascript:d_fenxiang();"><i class="bi bi-x-circle-fill d-wenzi-18"></i></div>
				</div>
			</div>
		</div>
	</div>
</div>



<div class="d-weixin d-xiala-weixin" style="display: none;" onclick="javascript:d_weixin();">
	<div class="d-container">
		<div class="d-row">
			<div class="d-col-md-8-juzhong d-quxian-0 d-a-baise">
				<div class="d-wenzi-you"><img src="{HOME_THEME_PATH}web/img/jiantou.png" class="d-you-10"/></div>
				<div class="d-wenzi-juzhong d-zitiyanse-bai">点击微信右上角的三个点按钮，即可分享</div>
				<div class="col-xs-12 d-wenzi-juzhong d-quxian-0 d-shang-10">
				<div class="d-kuan d-neikuang-10" ><i class="bi bi-x-circle-fill d-zitiyanse-bai d-wenzi-18"></i></div>
				</div>
			</div>
		</div>
	</div>
</div>
		<div id="mytupian" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mytupian">
			  <div class="modal-dialog modal-md" role="document">
				<div class="modal-content">
					<div class="d-neikuang-10">
						<form @submit.prevent="simijiaru">
						    <div class="form-group-0">
								<div class="input-group">
									  
								      <input type="text" class="form-control" id="dr_beijingtu" v-model="kami" placeholder="请输入邀请码...">
								      <span class="input-group-btn">
								        <button class="btn btn-default" type="submit">确认</button>
								      </span>
									
								</div>
							</div>
						</form>
						
					</div>
				  
				</div>
			  </div>
		</div>
		
	</div>
</div>
<style>
	/*用户组*/
	.d-xiala-yonghuzu {
		z-index: 1000;
		position: fixed;
		bottom: 0px;
		width: 100%;
		height: 40%;
		overflow: auto;
		background: #ffffff;
		right: 0;
		left: 0;
		box-shadow: 0 0 20px #d6d6d6;
		background-color: rgba(255, 255, 255, 1.0);
	}
	.d-xiala-shezhi {
	    z-index: 999999;
	    position: fixed;
		border-radius: 10px 10px 0 0;
	    bottom: 0px;
	    width: 100%;
	    /*height: 40%;*/
	    overflow: auto;
	    background: #b3b3b3;
	    right: 0;
	    left: 0;
	    box-shadow: 0 0 20px #d6d6d6;
	    background-color: rgba(255, 255, 255, 1.0);
	}
.d-xiala-fenxiang {
	z-index: 1000;
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: 40%;
	overflow: auto;
	background: #ffffff;
	right: 0;
	left: 0;
	box-shadow: 0 0 20px #d6d6d6;
	background-color: rgba(255, 255, 255, 1.0);
}
.d-xiala-weixin {
	    z-index: 999999;
	    position: fixed;
	    top: 0px;
	    width: 100%;
	    height: 60%;
	    overflow: auto;
	    background: #ffffff;
	    right: 0;
	    left: 0;
	    box-shadow: 0 0 20px #d6d6d6;
	    background-color: rgba(54, 54, 54, 0.9);
	}
	.d-guding-95 {
		/*position: sticky;*/
		
		position: sticky;
		top: 95px;
		z-index: 4;
		width: 220px;
		
		/*margin-left: -100px;*/
	}
	.d-guding-95-ding {
	
		position: absolute;
		/*top: 20px;*/
		margin-top: -35px;
		padding-bottom: 10px;
		z-index: 4;
		width: 200px;
		
	}
	#juzhong {
	    display: flex; 
		justify-content: center; 
		align-items: center; 
		background: linear-gradient(to right, #edf1f7, #e7ebf1);
	}
	.d-huiyuan-0{
		background: linear-gradient(to right, #28304a, #514967);
		color: #ffe4de;
		/*background: linear-gradient(to right, #c8cbd5, #d4dbe2);
		color: #555d6e;*/
	}
	.d-huiyuan-1{
		background: linear-gradient(to right, #28304a, #4a4e67);
		color: #ffe4de;
		/*background: linear-gradient(to right, #c8cbd5, #d4dbe2);
		color: #555d6e;*/
	}
	.d-huiyuan-2{
		
		background: linear-gradient(to right, #28304a, #4a4e67);
		color: #ffe4de;
	}
	.d-huiyuan-3{
		
		background: linear-gradient(to right, #28304a, #4a4e67);
		color: #ffe4de;
	}
	.d-huiyuan-4{
		
		background: linear-gradient(to right, #28304a, #4a4e67);
		color: #ffe4de;
	}
	.d-gao-850{
		height: 100px;
	}
	.d-gao-25 {
		height: 25px;
	}
	.btn-default {
	    color: #333;
	    background-color: #e7ebf1;
	    border-color: #e7ebf1;
	}

}


</style>
<!-- Initialize Swiper -->
<!--script src="{HOME_THEME_PATH}web/js/lazyload.js"></script-->
<script type="text/javascript">
	
	/*jQuery(document).ready(
	        function($){
	        $("img").lazyload({
	             placeholder : "{HOME_THEME_PATH}web/img/lazyload.gif", //加载图片前的占位图片
	             effect      : "fadeIn", //加载图片使用的效果(淡入)
	             threshold : 1000
	             
	        });
	    });*/
	function d_m_fabu() {
		if ($('.d-shezhi').is(':hidden')) {
			$('.d-shezhi').show();
		} else {
			$('.d-shezhi').hide();
		}
	}
	function d_fenxiang() {
		if ($('.d-fenxiang').is(':hidden')) {
			$('.d-fenxiang').show();
		} else {
			$('.d-fenxiang').hide();
		}
	}
	// 会员组
	function d_yonghuzu() {
		if ($('.d-yonghuzu').is(':hidden')) {
			$('.d-yonghuzu').show();
		} else {
			$('.d-yonghuzu').hide();
		}
	}
	function d_weixin() {
		if ($('.d-weixin').is(':hidden')) {
			$('.d-weixin').show();
		} else {
			$('.d-weixin').hide();
		}
	}
	
	
	
	const { createApp } = Vue;
	const app = createApp({
		data() {
		    return {  
		       //会员组
				huiyuanzudata:{} ,// 初始化为空数组，稍后将用接口数据填充
				huiyuanzudatalist:[],
				beijingtuValue:'',
				zhifu:'',
				kami:''
		    };  
		}, 
		watch: {  
		    kami(newVal, oldVal) {  
		      console.log('邀请码变化了:', newVal);  
		      // 在这里你可以添加处理新输入值的代码 
			   //this.kami = newVal;
		    }  
		  },
	methods: {
		
		huiyuanzulist() {
			
			//{dr_url_prefix('index.php')}?s=member&app=quan&c=jiaru&m=jiaruhuiyuanzu&quanid="+quanid+"&yonghuzuid="+huiyuanzuid
		    axios.get('{dr_url_prefix('index.php')}?s=member&app=quan&c=jiaru&m=huiyuanzulist&quanid={$id}') // 发送GET请求到指定的URL  
		        .then(response => {
					this.huiyuanzudatalist = response.data.data.data;
					/*if(response.data.code==0){
						layer.msg(response.data.data.msg,{time:500});
					}
					if(response.data.code==1){
						layer.msg(response.data.data.msg,{time:500});
					}*/
		            // 假设服务器返回的数据在response.data中  
		        })  
		        .catch(error => {  
		            console.error('Error fetching products:', error); // 处理错误情况  
		        });  
		},

		simijiaru() {
			var data = '&data[kami]='+this.kami+'&data[quanid]='+{$_GET['id']};
			console.log('邀请码:', data);  
			axios.post('/index.php?is_ajax=1&s=member&app=kami&c=home&m=index', data)  
			  .then(response => {  
			    // 请求成功，处理响应数据  
				  if(response.data.code==0){
					layer.msg(response.data.msg,{time:1000});
				  }
				  if(response.data.code==1){
					layer.msg(response.data.msg,{time:1000});
					location.reload();
					//$("#mytupian").hide();
					//$(".modal-backdrop").hide();
				  }
			    // this.addResult = 'Product added successfully!'; // 或者使用response.data中的实际信息  
			    // 你可以根据需要清空表单字段或执行其他操作  
			    //this.newProduct = {}; // 清空表单  
									  
			  })  
			  .catch(error => {  
			    // 请求失败，处理错误  
			    this.addResult = 'Error adding product: ' + error.message;  
			    console.error('Error adding product:', error); // 在控制台打印错误信息  
			  });  
		},
	},
	mounted() {

			
		},
	});
	// 挂载应用到DOM元素上
	app.mount('#show'); 

</script>
{template "css-js.html"}
{template "footer.html"}